<template>
  <div v-if="isShow">
      <div class="ui-message-box">
        <div class="ui-message">
          <div>
            <slot>我是多功能弹框</slot>
          </div>
          <div class="ui-dialog_ft" v-if="typeof opts !='boolean'">
            <a href="javascript:;" class="ui-btn_dialog" :class="{default:!item.color}" v-for="item in opts" @click.stop="toggle">{{item.txt}}</a>
          </div>
        </div>
      </div>
    <div class="ui-mask" v-if="isMask" @click="toggle"></div>
  </div>
</template>

<script type="text/babel">
  import Vue from 'vue';
  export default {
    name: 'xfd-message-box',
    props: {
      isShow: {
        type: [String, Boolean],
        default: true
      },
      isMask: {
        type: [String, Boolean],
        default: true
      },
      opts: {
        type: [Array, Boolean],
        default: false
      }
    },
    methods: {
      toggle(event) {
        this.$emit('closeCallback', event)
      }
    },
    mounted() {
      console.log(typeof this.opts)
    }
  }
</script>
<style>
  .ui-mask{
      background: rgba(38,38,38,.7);
      height: 100%;
      position: fixed;
      left: 0;
      top: 0;
      z-index: 100;
      width: 100%;
      z-index: 999;
  }

  /*移动端*/
  @media screen and (max-width:600px){  
      .ui-message{
        position: fixed;
        z-index:1000;
        width: 80%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: #fafafc;
        text-align: center;
        border-radius: 0.185rem;
        overflow: hidden;
    }
      .ui-message img{
        width:100%;
    }
  }  
  /*平板*/  
  @media screen and (min-width:600px){  
      .ui-message{
        position: fixed;
        z-index:1000;
        width: 8.63rem;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: #fafafc;
        text-align: center;
        border-radius: 0.185rem;
        overflow: hidden;
    }
      .ui-message img{
        width:100%;
    }
}  
.ui-message .xfd-close{
  line-height: 0.648rem;
  font-size: 0.37rem;
  color:#666;
  letter-spacing:0.019rem;
  padding-top: 0.185rem; 
}
</style>